<template>
  <div class="tableListChart" :class="{ tableChartColumn: isShowTable }">
    <!-- 图表主体 -->
    <div class="chartContent" ref="chartRef" :class="{ isShowSlot: isShowSlot }"></div>
    <slot></slot>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, watch } from "vue";
import { useECharts } from "@gui-pkg/hooks";
import { setStyle } from "../styleSet";

export default defineComponent({
  name: "TableChart",
  props: {
    chartOption: {
      type: Object,
    },
    isShowSlot: {
      type: Boolean,
      default: false,
    },
    isShowTable: {
      type: Boolean,
      default: false,
    },
    isShowTipIndex: {
      type: Number,
      default: -1,
    },
  },
  setup(props) {
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions, resize, getInstance } = useECharts(
      chartRef as Ref<HTMLDivElement>
    );

    const showXDataIndexTootip = (index) => {
      let chartInstance = getInstance();
      chartInstance.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: index,
      });
    };

    watch(
      () => props.isShowTipIndex,
      (val) => {
        console.log(val, "val");
        showXDataIndexTootip(val);
      }
    );

    watch(
      () => props.chartOption,
      (val) => {
        let option = setStyle(val);
        setOptions(option);
        resize();
      }
    );

    watch(
      () => props.isShowTable,
      () => {
        setTimeout(() => {
          resize();
        }, 150);
      }
    );

    return {
      chartRef,
    };
  },
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.tableListChart {
  width: 100%;
  height: 100%;
  padding-right: 20px;
  position: relative;
  .chartContent {
    width: 100%;
    height: 100%;
    min-height: 480px;
  }
}
.tableChartColumn {
  width: calc(100% - 390px) !important;
}
.isShowSlot {
  width: 100%;
  height: calc(100% - 40px) !important;
}
</style>
